<template>
  <div class="echeader">
    <div class="echeader_title">
      中台管理系统
      <span style="font-size: 16px">({{ version }})</span>
    </div>
    <el-dropdown trigger="click" class="echeader_userDropdown" @command="onDropdownClick">
      <div class="echeader_userArea">
        <div class="echeaderUserArea_name">{{ nickname }}</div>
        <img class="echeaderUserArea_img" :src="imageUrl" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="item in headerServiceList"
          :key="item.key"
          :command="item.key"
          icon="el-icon-link"
          :style="serviceName === item.value ? 'color: #409EFF' : ''"
          ><span>{{ item.value }}</span></el-dropdown-item
        >
        <el-dropdown-item command="logout" icon="el-icon-switch-button"
          ><span>退出登录</span></el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    <el-tooltip
      v-if="path !== 'service'"
      class="item"
      effect="dark"
      content="返回服务选择页"
      placement="bottom"
    >
      <div class="echeader_homeIcon" @click="toHome">
        <i class="el-icon-s-home"></i>
      </div>
    </el-tooltip>
    
  </div>
</template>

<script>
export default {
  name: "echeader",
  data() {
    return {
      imgBefore: process.env.PROGOO_FILE + "hyscanImg/file/",
      username: "",
      nickname: "",
      imageUrl: "",
      version: "",
      path: "",
      serviceName: "",
      headerServiceList: [],
      userId: "",
    };
  },
  mounted() {
    this.username = localStorage.getItem("username");
    this.serviceName = localStorage.getItem("serviceName");
    this.version = process.env.VERSIONS;
    this.path = this.$route.name;
    if (this.path == "service") {
      this.serviceName = "";
    }
    this.getNameAndImg();
    this.getServiceData();
  },
  methods: {
    getNameAndImg() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/userCenter/search",
        method: "post",
        data: { username: this.username, id: this.userId },
      }).then((res) => {
        if (res.data.code === 200) {
          this.userId = res.data.result.id;
          this.nickname = res.data.result.nickname;
          if (res.data.result.url && res.data.result.url !== "") {
            this.imageUrl = this.imgBefore + res.data.result.url;
          } else {
            this.imageUrl = require("@/assets/header/user.png");
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getServiceData() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "menu/server",
        method: "get",
      }).then((res) => {
        if (res.data.code === 200) {
          this.headerServiceList = res.data.result;
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    onDropdownClick(command) {
      if (command === "logout") {
        localStorage.removeItem("token");
        this.$router.push({ name: "login" });
      } else if (command === "service") {
        this.$router.replace({ path: "/service" });
      } else {
        for (let i in this.headerServiceList) {
          if (command == this.headerServiceList[i].key) {
            let name = this.headerServiceList[i].value;
            let sKey = localStorage.getItem("serviceKey");
            if (sKey !== command) {
              localStorage.setItem("serviceKey", command);
              localStorage.setItem("serviceName", name);
              this.path = this.$route.name;
              if (this.path !== "home") {
                this.$router.push({ path: "/main" });
              }
              if (this.path !== "service") {
                location.reload();
              }
            }
            break;
          }
        }
      }
    },
    toHome() {
      if (this.serviceName !== "") {
        this.$router.replace({ path: "/service" });
      }
    },
    toKanban() {
      this.$router.push({ path: "/kanban" });
    },
    changeService() {
      this.serviceName = localStorage.getItem("serviceName");
    },
  },
};
</script>

<style lang="less">
.echeader {
  width: 100%;
  height: 80px;
  // flex-shrink: 0;
  float: left;
  background-image: url("~@/assets/header/header_bg.png");
  background-size: 100% 100%;
  // background: linear-gradient(90deg,#409eff, #40c7ff);
  .echeader_homeIcon {
    float: right;
    height: 100%;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    i {
      color: white;
      font-size: 30px;
    }
  }
  .echeader_homeIcon:hover {
    background: rgba(0, 0, 0, 0.15);
  }
  .echeader_title {
    width: 70%;
    float: left;
    height: 100%;
    line-height: 80px;
    font-size: 32px;
    color: white;
    padding-left: 20px;
    box-sizing: border-box;
    font-family: "pmzd";
  }
  .echeader_userDropdown {
    height: 100%;
    float: right;
    .echeader_userArea {
      height: 100%;
      float: right;
      padding: 0 20px;
      box-sizing: border-box;
      cursor: pointer;
      .echeaderUserArea_name {
        float: left;
        font-size: 18px;
        color: #fff;
        height: 100%;
        line-height: 80px;
      }
      .echeaderUserArea_img {
        float: left;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 25px;
      }
    }
    .echeader_userArea:hover {
      background: rgba(0, 0, 0, 0.15);
    }
  }
  @font-face {
    font-family: "pmzd";
    src: url("~@/assets/font/pmzd.ttf");
    font-weight: normal;
    font-style: normal;
  }
}
</style>
